  /*  第一个 2023全学科走势图 */
  const lineChaet=(data)=>{
    // console.log(data)
let myChart =echarts.init(document.querySelector('#line'))
let option={

  title:{
    text:'2023全学科走势',
    top:15,
    left:10,
    textStyle:{
      fontSize:16
    }
  },
  xAxis: {
    type: 'category',
    data:data.map(item=>item.month),
    // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
axisLabel:{
  color:'#999'//坐标轴文字颜色
},
axisLine:{
lineStyle:{
  color:'#ccc',
  type:'dashed'
}
}

  },
  yAxis: {
    type: 'value',
    splitLine:{
      lineStyle:{
        type:'dashed',
        color:'#ccc'
      }
    }
  },

  series: [
    {
      data:data.map(item=>item.salary),
      // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000,10000,12000,13000,15000,19000],
      type: 'line',
      smooth: true,//平滑曲线
      lineStyle:{
        width:6,
      },
      symbolSize:8,
      areaStyle:{
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0, color: '#499FEE' // 0% 处的颜色
          }, 
          {
            offset: 0.8, color: 'rgba(255,255,255,0)' // 0% 处的颜色
        }, 

          {
              offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
          }
        ],
          global: false // 缺省为 false
        }
      }
    }
  ],
  tooltip:{
    trigger:'axis'
  },
  //网格
  gird:{
    top:'20%'
  },
  //颜色
  color:{
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: '#499FEE' // 0% 处的颜色
    }, {
        offset: 1, color: '#5D75F0' // 100% 处的颜色
    }],
    global: false // 缺省为 false
  }
};
myChart.setOption(option)
}

// lineChaet()

/* 第二个 薪资期待图*/
const xinzi=(a)=> {
  // console.log(a)
let myChart=echarts.init(document.querySelector('#salary'))
let option={
//标题
  title:{
    text:'薪资期待图',
    top:10,
    left:10,
    textStyle:{
      fontSize:16
    }
  },
  tooltip: {
    trigger: 'item'
  },
  //图例
  legend: {
    bottom: '5%',
    left: 'center'
  },
  series: [
    {
      name: '班级薪资分布',
      type: 'pie',
      radius: ['40%', '50%'],
      avoidLabelOverlap: false,

      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
        // borderCap:'round'
        decal:{
          symbolSize:1
        }
      },
      //标签，标签控件
      label: {
        show: false,//控制标签不显示
        position: 'center'
      },
      //强调，加重
      emphasis: {
        label: {
          show: true,
          fontSize: 30,
          fontWeight: 'bold'
        }
      },
      //
      labelLine: {
        show: false
      },
      data:a.map(item=>{
        return {value: item.g_count + item.b_count,name:item.label}
      })
      // data: [
      //   { value: 12, name: '一万以下' },
      //   { value: 23, name: '1-1.5万' },
      //   { value: 18, name: '1.5-2 万' },
      //   { value: 10, name: '2-2.5万' },
      // ]
    }
  ]
}
myChart.setOption(option)
}
// xinzi()


/* 第三个 班级各组薪资 */

const groupSalaryChart=(a)=>{
  console.log(a)
  let myChart=echarts.init(document.querySelector('#lines'))

  let option={
    //图例
    legend: {},
    //x轴
    xAxis: {
      type: 'category',
      data: a[1].map(item=>item.name),
       // x轴颜色配置 
     axisLabel:{
     color:'#999'//坐标轴文字颜色
     },
      axisLine:{
     lineStyle:{
      color:'#ccc',
      type:'dashed'
     }
     }
     },
    //y轴
    yAxis: {
      type: 'value',
      splitLine:{
        lineStyle:{
          color:'#ccc',
          type:'dashed'
        }
      }
    },
    //系列数据
    series: [
      {
        data: a[1].map(item=>item.hope_salary),
        type: 'bar',
        name:'期待薪资'
      },
      {
        data: a[1].map(item=>item.salary),
        type: 'bar',
        name:'就业薪资'
      }
    ],
    //颜色
    color:[
      {
        type: 'bar',
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [{
            offset: 0, color: '#34D39A' // 0% 处的颜色
        }, {
            offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      },
      {
        type: 'bar',
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [{
            offset: 0, color: '#499FEE' // 0% 处的颜色
        }, {
            offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      },
    ],
    //提示框
    tooltip:{
      trigger:'axis'
    }
  }
  myChart.setOption(option)


document.querySelector('#btns').addEventListener('click',function(e){
if(e.target.tagName==='BUTTON'){
  document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
  e.target.classList.add('btn-blue')
  //获取组号
  let i=e.target.innerHTML.trim()
  // console.log(i) 每组的数据就是[i]
  option.xAxis.data=a[i].map(item=>item.name)
  option.series[0].data=a[i].map(item=>item.hope_salary)
  option.series[1].data=a[i].map(item=>item.salary)
  myChart.setOption(option)
}
})

}
// groupSalaryChart()



/* 左下角 饼图 */
 const sex=(a)=>{
  let myChart=echarts.init(document.querySelector('#gender'))
  let option={
    //标题
      title:[
        {
          text:'薪资期待图',
          top:10,
          left:10,
          textStyle:{
            fontSize:16
          }
        },
        {
          text:'男生',
          top:'45%',
          left:'45%',
          textStyle:{
            fontSize:12
          }
        },
        {
          text:'女生',
          top:'85%',
          left:'45%',
          textStyle:{
            fontSize:12
          }
        },
      ],
      tooltip: {
        trigger: 'item'
      },
      //图例
      // legend: {
      //   bottom: '5%',
      //   left: 'center'
      // },
      series: [
        {
          name: '男生',
          type: 'pie',
          radius: ['20%', '30%'],
          center:['50%','30%'],
          avoidLabelOverlap: false,
          //强调，加重
          emphasis: {
            label: {
              show: true,
              fontSize: 30,
              fontWeight: 'bold'
            }
          },
          data:a.map(item=>{
            return { value: item.b_count, name: item.label }
          })
          //
          // labelLine: {
          //   show: false
          // },
          // data: [
          //   { value: 12, name: '一万以下' },
          //   { value: 23, name: '1-1.5万' },
          //   { value: 18, name: '1.5-2 万' },
          //   { value: 10, name: '2-2.5万' },
          // ]
        },
        {
          name: '女生',
          type: 'pie',
          radius: ['20%', '30%'],
          center:['50%','70%'],
          avoidLabelOverlap: false,
          //强调，加重
          emphasis: {
            label: {
              show: true,
              fontSize: 30,
              fontWeight: 'bold'
            }
          },
          data:a.map(item=>{
            return { value: item.g_count, name: item.label }
          })
          //
          // labelLine: {
          //   show: false
          // },
          // data: [
          //   { value: 12, name: '一万以下' },
          //   { value: 23, name: '1-1.5万' },
          //   { value: 18, name: '1.5-2 万' },
          //   { value: 10, name: '2-2.5万' }
          // ]
        }
      ],
    }
  myChart.setOption(option)
 }

//  sex()


 /* 地图 */
 function mapChart(a){
  const mapData = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 3 },
   { name: '天津', value: 2 },
   { name: '上海', value: 4 },
   { name: '重庆', value: 1 },
   { name: '河北', value: 20 },
   { name: '河南', value: 23 },
   { name: '云南', value: 0 },
   { name: '辽宁', value: 15 },
   { name: '黑龙江', value: 12 },
   { name: '湖南', value: 2 },
   { name: '安徽', value: 5 },
   { name: '山东', value: 18 },
   { name: '新疆', value: 0 },
   { name: '江苏', value: 5 },
   { name: '浙江', value: 1 },
   { name: '江西', value: 4 },
   { name: '湖北', value: 3 },
   { name: '广西', value: 2 },
   { name: '甘肃', value: 9 },
   { name: '山西', value: 11 },
   { name: '内蒙古', value: 14 },
   { name: '陕西', value: 14 },
   { name: '吉林', value: 10 },
   { name: '福建', value: 0 },
   { name: '贵州', value: 0 },
   { name: '广东', value: 0 },
   { name: '青海', value: 3 },
   { name: '西藏', value: 0 },
   { name: '四川', value: 1 },
   { name: '宁夏', value: 1 },
   { name: '海南', value: 0 },
   { name: '台湾', value: 0 },
   { name: '香港', value: 0 },
   { name: '澳门', value: 0 }
  ]
  mapData.forEach(item=>{
    //判断接口返回的数据有没有北京，河北。。。的
    let 结果=a.find(v=>{
      return v.name.includes(item.name)
    })
    if(结果){
      //item.value=接口返回的value
      item.value=结果.value
    }
  })
   let myChart=echarts.init(document.querySelector('#map'))
  
  let option= {
      // 标题
      title: {
        text: '籍贯分布', // 标题文本
        top: 15, // 没有单位，单位就是 px
        left: 10,
        textStyle: {
          fontSize: 16
        }
      },
      // 系列数据
      series: [
        {
          data: mapData,
          name: '籍贯分布',
          type: 'map', // 类型：地图
          map: 'china', // 中国地图
          // 每个区域（每个省）的名字
          label: {
            show: true, // 默认显示
            color: 'rgba(0, 0, 0, 0.7)',
            fontSize: 10
          },
          // 每个省的颜色和边框颜色
          itemStyle: {
            areaColor: '#E0FFFF',
            borderColor: 'rgba(0, 0, 0, 0.2)'
          },
          // 高亮状态下（鼠标移入时），区域的样式
          emphasis: {
            itemStyle: {
              areaColor: '#34D39A', // 每个省的颜色
              borderWidth: 0, // 边框线去掉
              shadowBlur: 20,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ],
      // 视觉映射组件
      visualMap: {
        type: 'continuous',//continuous  连续不断地，持续的
        max: 13,
        min: 0,
        text: [13, 0],
        inRange: {
          color: ['#fff', '#0075F0']
        },
        left: 40,
        bottom: 20
      },
      // 鼠标移入提示
      tooltip: {
        // 自定义提示的格式
        formatter: '{b}：{c} 位学员',
        textStyle: {
          color: '#fff'
        },
        borderColor: 'transparent',
        backgroundColor: 'rgba(0, 0, 0, 0.5)'
      }
  };
  myChart.setOption(option)
 }
//  mapChart()


// ====================================================================================
// 发送请求，获取接口数据，把数据渲染到页面中，把数据用到图表中
axios({
  url: '/dashboard',
  headers: {
    Authorization: localStorage.getItem('token')
  }
}).then(result => {
  // console.log(result)
  let {groupData,overview,provinceData,salaryData,year}=result.data.data
  // console.log(overview)
  for(let key in overview){
    document.querySelector(`[name=${key}]`).innerHTML=overview[key]
  }
console.log(result.data.data)
  lineChaet(year)
  sex(salaryData)
  xinzi(salaryData)
  groupSalaryChart(groupData)
  //地图
  mapChart(provinceData)
})
